import React, { useState, useEffect } from 'react';
import { Config } from '../types/config';
import { getConfig, saveConfig } from '../utils/configStorage';

const ConfigView: React.FC = () => {
  const [config, setConfig] = useState<Config>(getConfig());
  const [isSaving, setIsSaving] = useState(false);
  const [saveMessage, setSaveMessage] = useState('');

  // 初始化配置
  useEffect(() => {
    const currentConfig = getConfig();
    setConfig(currentConfig);
  }, []);

  // 处理配置变化
  const handleConfigChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    
    // 处理嵌套属性
    if (name.includes('.')) {
      const [parent, child] = name.split('.');
      setConfig(prev => ({
        ...prev,
        [parent]: {
          ...prev[parent as keyof Config],
          [child]: value
        }
      }));
    } else {
      // 处理普通属性
      setConfig(prev => ({
        ...prev,
        [name]: value
      }));
    }
  };

  // 保存配置
  const handleSave = () => {
    setIsSaving(true);
    setSaveMessage('');
    
    try {
      saveConfig(config);
      setSaveMessage('配置保存成功！');
      
      // 3秒后清除消息
      setTimeout(() => {
        setSaveMessage('');
      }, 3000);
    } catch (error) {
      setSaveMessage('配置保存失败，请重试！');
      console.error('保存配置失败:', error);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-4xl font-serif font-bold text-brand-wood">网站配置</h2>
        <button
          onClick={handleSave}
          disabled={isSaving}
          className={`px-6 py-3 rounded-full font-bold shadow-md transition-colors ${isSaving 
            ? 'bg-gray-400 text-white cursor-not-allowed' 
            : 'bg-brand-orange text-white hover:bg-orange-600'}`}
        >
          {isSaving ? '保存中...' : '保存配置'}
        </button>
      </div>

      {saveMessage && (
        <div className={`mb-8 p-4 rounded-md text-center font-medium ${saveMessage.includes('成功') ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
          {saveMessage}
        </div>
      )}

      <div className="space-y-12">
        {/* 公司信息 */}
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
          <h3 className="text-2xl font-serif font-bold text-brand-wood mb-6">公司信息</h3>
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">公司名称</label>
              <input
                type="text"
                name="companyName"
                value={config.companyName}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">公司介绍</label>
              <textarea
                name="companyIntro"
                value={config.companyIntro}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                rows={4}
              ></textarea>
            </div>
          </div>
        </div>

        {/* 联系方式 */}
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
          <h3 className="text-2xl font-serif font-bold text-brand-wood mb-6">联系方式</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">地址</label>
              <input
                type="text"
                name="address"
                value={config.address}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">电话</label>
              <input
                type="tel"
                name="phone"
                value={config.phone}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">邮箱</label>
              <input
                type="email"
                name="email"
                value={config.email}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">WhatsApp</label>
              <input
                type="tel"
                name="whatsapp"
                value={config.whatsapp}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              />
            </div>
          </div>
        </div>

        {/* 介绍视频 */}
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
          <h3 className="text-2xl font-serif font-bold text-brand-wood mb-6">介绍视频</h3>
          <div>
            <label className="block text-sm font-medium text-brand-wood mb-2">视频URL</label>
            <input
              type="url"
              name="introVideoUrl"
              value={config.introVideoUrl}
              onChange={handleConfigChange}
              className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
              placeholder="https://example.com/video.mp4"
            />
          </div>
        </div>

        {/* 商品介绍PDF */}
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
          <h3 className="text-2xl font-serif font-bold text-brand-wood mb-6">商品介绍PDF</h3>
          <div className="grid md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">英文PDF</label>
              <input
                type="url"
                name="productCatalogs.en"
                value={config.productCatalogs.en}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://example.com/catalog-en.pdf"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">中文PDF</label>
              <input
                type="url"
                name="productCatalogs.cn"
                value={config.productCatalogs.cn}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://example.com/catalog-cn.pdf"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">西班牙文PDF</label>
              <input
                type="url"
                name="productCatalogs.es"
                value={config.productCatalogs.es}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://example.com/catalog-es.pdf"
              />
            </div>
          </div>
        </div>

        {/* 社交平台网址 */}
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
          <h3 className="text-2xl font-serif font-bold text-brand-wood mb-6">社交平台网址</h3>
          <div className="grid md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">Facebook</label>
              <input
                type="url"
                name="socialLinks.facebook"
                value={config.socialLinks.facebook}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://facebook.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">Instagram</label>
              <input
                type="url"
                name="socialLinks.instagram"
                value={config.socialLinks.instagram}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://instagram.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">X (Twitter)</label>
              <input
                type="url"
                name="socialLinks.x"
                value={config.socialLinks.x}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://x.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">YouTube</label>
              <input
                type="url"
                name="socialLinks.youtube"
                value={config.socialLinks.youtube}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://youtube.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">LinkedIn</label>
              <input
                type="url"
                name="socialLinks.linkedin"
                value={config.socialLinks.linkedin}
                onChange={handleConfigChange}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="https://linkedin.com"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfigView;
